<template>
  <div class="video-viewer-container">
    <div class="el-row">
      <!-- Left side menu list -->
      <div class="el-col el-col-4 menu-container">
        <div class="camera-list">
          <ul class="el-menu">
            <li 
              v-for="(camera, index) in cameras" 
              :key="index"
              :class="['el-menu-item', {'is-active': activeCamera === index}]"
              @click="selectCamera(index)"
              :title="camera.name"
            >
              <i class="el-icon-video-camera"></i>
              <span :style="{color: camera.status === 'online' ? 'green' : 'red'}">
                [{{ camera.status === 'online' ? '在线' : '离线' }}]{{ camera.name }}
              </span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Right side video display -->
      <div class="el-col el-col-20 video-container">
        <div class="video-grid">
          <div 
            v-for="(frame, idx) in videoFrames" 
            :key="idx" 
            class="video-frame"
          >
            <div class="video-wrapper">
              <video 
                v-if="frame.source"
                controls
                :src="frame.source"
                autoplay
                muted
              ></video>
              <div v-else class="video-placeholder">
                <i class="el-icon-video-camera"></i>
                <p>暂无视频</p>
              </div>
              <div class="video-info">
                <span>{{ frame.title || '未选择摄像头' }}</span>
                <span 
                  class="close-btn"
                  @click="closeFrame(idx)"
                >关闭</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoMonitoringAll',
  data() {
    return {
      activeCamera: 0,
      cameras: [
        { name: '地面工业广场_兴仁市-百卡煤矿-地面工业广场', status: 'online' },
        { name: '瓦斯抽采_兴仁市-百卡煤矿-1102回风巷施钻点', status: 'offline' },
        { name: '压风机房_兴仁市-百卡煤矿-压风机房', status: 'online' },
        { name: '主通风机房_兴仁市-百卡煤矿-主扇房值班室', status: 'online' },
        { name: '提升机房_兴仁市-百卡煤矿-副井绞车房', status: 'online' },
        { name: '采煤工作面_兴仁市-百卡煤矿-1101工作面', status: 'offline' },
        { name: '掘进工作面_兴仁市-百卡煤矿-1103运输巷T1', status: 'offline' },
        { name: '带式运输机机头_兴仁市-百卡煤矿-主井皮带头', status: 'online' },
        { name: '带式运输机机头_兴仁市-百卡煤矿-煤仓上口', status: 'offline' },
        { name: '带式运输机机头_兴仁市-百卡煤矿-1101运输巷皮带', status: 'offline' },
        { name: '井下变电所_兴仁市-百卡煤矿-采区变电所', status: 'offline' },
        { name: '排水泵房_兴仁市-百卡煤矿-水泵房', status: 'offline' },
        { name: '避难硐室_兴仁市-百卡煤矿-永久避难硐室', status: 'offline' },
        { name: '人员入井口或上下口_兴仁市-百卡煤矿-主井口', status: 'online' },
        { name: '人员入井口或上下口_兴仁市-百卡煤矿-副井口', status: 'online' }
      ],
      videoFrames: Array(4).fill({ source: null, title: null })
    }
  },
  methods: {
    selectCamera(index) {
      this.activeCamera = index;
      const selectedCamera = this.cameras[index];
      
      // Find the first empty frame or replace the first one
      let frameIndex = this.videoFrames.findIndex(frame => !frame.source);
      if (frameIndex === -1) frameIndex = 0;
      
      if (selectedCamera.status === 'online') {
        // In a real app, you would set the actual video stream URL here
        this.$set(this.videoFrames, frameIndex, {
          source: `rtsp://example.com/stream/${index}`, // Replace with actual stream URL
          title: selectedCamera.name
        });
      } else {
        this.$message.warning('该摄像头当前离线，无法播放');
      }
    },
    closeFrame(index) {
      this.$set(this.videoFrames, index, { source: null, title: null });
    }
  }
}
</script>

<style scoped>
.video-viewer-container {
  height: 100%;
  padding: 12px;
}

.menu-container {
  padding-right: 12px;
  height: 100%;
}

.camera-list {
  height: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-menu-item {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-container {
  padding-left: 12px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 300px);
  gap: 15px;
}

.video-frame {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.video-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

video {
  width: 100%;
  height: calc(100% - 30px);
  object-fit: cover;
  background: #000;
}

.video-placeholder {
  width: 100%;
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #999;
}

.video-placeholder i {
  font-size: 40px;
  margin-bottom: 10px;
}

.video-info {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
}

.close-btn {
  cursor: pointer;
  color: #f56c6c;
}

.close-btn:hover {
  text-decoration: underline;
}
</style>